<template>
  <div class="loginBG flex_cc">
    <div>
      <div class="loginBox">
        <h3>登录Login</h3>
        <div class="inputBox">
          <div class="flex_b">
            <span>登录账号：</span>
            <el-input v-model="username" @keyup.enter.native="login"></el-input>
          </div>
          <div class="flex_b">
            <span>登录密码：</span>
            <el-input type="password" v-model="password" @keyup.enter.native="login"></el-input>
          </div>
        </div>
        <div class="btnBox flex_a">
          <a href="javascript:;" @click="password = '',username = ''">取消</a>
          <a href="javascript:;" @click="login">确认</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs';
  import {getCookie,setCookie} from '../cookieUtil/cookieUtil'

  export default {
    name: 'Login',
    data () {
      return {
        username: '',
        password: ''
      }
    },

    methods: {
      //登录
      login() {
        let that = this;
        let login = {
          fUserName: that.username,
          fPassWord: that.password,
        }
        if (that.username == '') {
            that.$message.error('请输入账号！');
            return
        }
        if (that.password == '') {
          that.$message.error('请输入密码！');
          return
        }
        // that.$router.push({
        //   path: "/Index",
        // });
        axios.post(this.host+'/Login/Index',
          qs.stringify({
            ...login,
          }))
        .then(function (response) {
          console.log(response.data);
          if (response.data > 0) {
            that.$message({
              message: '登录成功',
              type: 'success',
              duration: 1500,
              onClose (){
                //设置cookie
                setCookie('userId', response.data, 7)
                setCookie('userName', that.username, 7)
                that.$router.push({
                  path: "/Index",
                });
              }
            });
          }
          else if (response.data = -1) {
            that.$message.error('账号或者密码错误');
          }
          else {
            that.$message.error('账号或者密码错误');
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    }
  }
</script>

<style>
  .loginBG{
    width: 100vw;
    height: 100vh;
    background: url(../../static/images/loginBG.png)no-repeat;
    background-size: 100% 100%;
  }
  .loginBox{
    width: 500px;
    height: 250px;     
    margin: auto;
    padding: 25px 40px;
    box-sizing: border-box;
    background-color: #dcdcdc;
    box-shadow: 0px 0px 35px 0px 
    rgba(0, 0, 0, 0.75);
    border-radius: 8px;
  }
  .loginBox h3{
    margin: 0;
    font-size: 18px;
    text-align: center;
  }
  .loginBox .inputBox{
    margin: 30px 0;
  }
  .loginBox .inputBox .flex_b{
    margin-bottom: 20px 
  }
  .loginBox .inputBox span{
    width: 130px;
    display: inline-block;
    line-height: 35px;
    font-size: 14px;
  }
  .loginBox input{
    height: 35px;
    background-color: #ffffff;
    border-radius: 5px;
  }
</style>
